<template>
	<view class="information-change">
		<u--form labelPosition="left" ref="ruleForm" labelWidth="270rpx" :model="ruleForm" :rules="rules">
			<view class="content-view">
				<u-form-item label="姓名" prop="userName">
					<u--input placeholder="请输入姓名" border="none" v-model="ruleForm.userName" inputAlign="right" suffixIcon="arrow-right">
					</u--input>
				</u-form-item>

				<u-form-item label="身份证号码" prop="idCard">
					<u--input placeholder="请输入身份证号码" border="none" v-model="ruleForm.idCard" inputAlign="right" suffixIcon="arrow-right">
					</u--input>
				</u-form-item>

				<u-form-item label="联系电话" prop="phone">
					<u--input type="number" placeholder="请输入联系电话" border="none" v-model="ruleForm.phone" inputAlign="right" suffixIcon="arrow-right">
					</u--input>
				</u-form-item>

				<u-form-item label="电子邮箱" prop="email">
					<u--input placeholder="请输入电子邮箱" border="none" v-model="ruleForm.email" inputAlign="right" suffixIcon="arrow-right">
					</u--input>
				</u-form-item>

				<u-form-item label="性别" @click="selectShow = true">
					<u--input placeholder="请选择性别" border="none" v-model="sex" disabled disabledColor="#ffffff"  inputAlign="right"
						suffixIcon="arrow-right">
					</u--input>
				</u-form-item>
			</view>
		</u--form>
		<view class="btn-view">
			<view class="login-btn" @click="submit">保存</view>
		</view>

		<!-- 选择器控件 -->
		<u-picker :show="selectShow" :columns="columns" keyName="label" @confirm="selectSure"
			@cancel="selectShow=false">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			var validateDcard = (rule, value, callback) => {
				// 身份证正则
				let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (value === '') {
					callback(new Error('请输入身份证号码'));
				} else if (!reg.test(value)) {
					callback(new Error('身份证格式不正确'));
				} else {
					callback();
				}
			};
			var validatePhone = (rule, value, callback) => {
				// 电话正则
				let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
				if (value === '') {
					callback(new Error('请输入联系电话'));
				} else if (!reg.test(value)) {
					callback(new Error('联系电话格式不正确'));
				} else {
					callback();
				}
			};
			var validateEmail = (rule, value, callback) => {
				// 邮箱正则
				let reg = /^[a-zA-Z0-9._%+-]+@(?!.*\.\..*)[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
				if (value === '') {
					callback(new Error('请输入电子邮箱'));
				} else if (!reg.test(value)) {
					callback(new Error('电子邮箱格式不正确'));
				} else {
					callback();
				}
			};
			return {
				// 下拉框展示
				selectShow: false,
				// 下拉框数据
				columns: [
					[{
							id: 1,
							label: '女'
						},
						{
							id: 0,
							label: '男'
						}
					]
				],
				sex: '',
				ruleForm: {
					userName: '',
					dCard: '',
					phone: '',
					email: '',
					sex: ''
				},
				rules: {
					userName: [{
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					idCard: [{
						validator: validateDcard,
						trigger: ['change', 'blur']
					}],
					phone: [{
						validator: validatePhone,
						trigger: ['change', 'blur']
					}],
					email: [{
						validator: validateEmail,
						trigger: ['change', 'blur']
					}],
					// sex: [{
					// 	required: true,
					// 	message: '请选择性别',
					// 	trigger: ['blur', 'change']
					// }]
				}
			}
		},
		onShow() {
			this.ruleForm = uni.getStorageSync('userInfo')
			console.log(this.ruleForm)
			// this.ruleForm.idCard = this.ruleForm.idCard.replace(/(?<=\d{3})\d{12}(?=\d{2})/, '************')
			this.sex = this.ruleForm.sex == 0 ? '男' : '女'
		},
		methods: {
			// 选择器确认
			selectSure(e) {
				this.sex = e.value[0].label
				this.ruleForm.sex = e.value[0].id
				this.selectShow = false
			},
			submit() {
				let that = this
				this.$refs.ruleForm.validate().then(res => {
					let params = {
						userName: that.ruleForm.userName,
						phone: that.ruleForm.phone,
						idCard: that.ruleForm.idCard,
						email: that.ruleForm.email,
						sex: that.ruleForm.sex
					}
					that.request(that.$api.updateUserInfo, params, 'PUT').then((res) => {
						if (res.code == 200) {
							uni.$u.toast('信息修改成功！')
							// 重新调用户信息接口
							this.getUserInfo()
						} else {
							uni.$u.toast('信息修改失败！')
						}
					})
				}).catch(errors => {
					uni.$u.toast('信息修改保存失败!')
				})
			},
			getUserInfo() {
				let that = this
				that.request(that.$api.getBaseUserInfo, "GET").then((res) => {
					if (res) {
						let userInfo = res.resultValue
						// 保存用户信息
						uni.setStorageSync('userInfo', userInfo)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.information-change {
		height: 100vh;
		background: #F1F2F5;
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.content-view {
		padding: 0 20rpx 0 40rpx;
		background: white;
	}

	.btn-view {
		padding: 60rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;
	}

	.login-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #2878FF;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		border-radius: 20rpx;
	}

	>>>.uni-input-input {
		text-align: right !important;
	}

	>>>.input-placeholder {
		text-align: right !important;
	}

	>>>.u-form-item__body {
		height: 100rpx;
		box-sizing: border-box;
	}

	>>>.u-form-item__body__right__message {
		text-align: right !important;
		margin: 0 40rpx 10rpx 0;
	}

	>>>.u-form-item {
		border-bottom: 2rpx solid #EFEFEF;
	}

	>>>.u-form-item:last-child {
		border-bottom: none;
	}
</style>
